import React from "react";
import './TodoMain.css';
import {useSelector, useDispatch} from 'react-redux';
import { checkTodo, removeTodo } from "../../../app/slices/todoSlice";

export default function TodoMain() {
  //获取状态
  let todo = useSelector(state => state.todo);
  //获取 dispatch 函数
  let dispatch = useDispatch();

  return (
    <ul className="todo-main">
      {
        todo.map(item => {
          return <li key={item.id}>
                  <label>
                    <input type="checkbox" checked={item.done} onChange={(e) => {
                      //更新状态
                      dispatch(checkTodo({id: item.id, done: e.target.checked}))
                    }} />
                    <span className={item.done ? "done" : ''}>{item.title}</span>
                  </label>
                  <button className="btn btn-danger" onClick={() => {
                    //更新状态
                    dispatch(removeTodo(item.id));
                  }}>删除</button>
                </li>
        })
      }
      
    </ul>
  );
}
